<template>
  <div>
    <main class="container">
      <div class="tip">
        <div class="return el-icon-arrow-left" @click="$router.go(-1)"></div>
        <div class="title">邀请您注册</div>
        <div class="more el-icon-more"></div>
      </div>
      <div class="login-box">
        <div class="login">
          <img src="./assets/images/logo.png" alt="" />
        </div>

        <div class="login-titile">注册成功</div>
        <div class="login-tip">使用{{ phone }}登录问三师</div>
      </div>
      <div class="input-box">
        <!-- ios的按钮 -->
        <div class="registerBtn" v-if="['ios'].includes(equiName)">
          <a :href="iosUrl" v-if="iosUrl">
            <span>下载</span>
          </a>
        </div>

        <!-- 安卓的按钮 -->
        <div class="registerBtn" v-else>
          <a :href="androidUrl" v-if="androidUrl">
            <span>下载</span>
          </a>
        </div>
      </div>
      <div class="BottomTip">
        已经有问三师？
        <span style="#F77A23" @click="openImg" v-if="isWeichatH5">打开</span>
        <!-- <span style="#F77A23" @click="openApp" v-else>打开</span> -->
        <a href="wssuniapp://" v-else>打开</a>
      </div>
      <!-- <div class="BottomTip">问三师网站www.wensanshi.com</div> -->

    </main>
    <!-- 显示浏览器打开 -->
    <div class="fixImg" v-if="isFixImg">
      <img src="./assets/images/outbrowser_backdrop.png">
    </div>
  </div>
</template>

<script>
import { debounce } from "@/wss/utils/wss.js";
import { getApplicationListApi } from "@/BMViews/api/login.js";
export default {
  data() {
    return {
      // 获取验证码按钮
      verifyContent: {
        disabled: false,
        text: "获取验证码",
        time: 60,
      },
      // 邀请的手机号
      phone: "",
      //   用户的手机号
      getCodeObj: {
        phone: "",
        name,
        code: "",
      },

      equiName: '',//设备名称
      androidUrl: '',// 安卓链接
      iosUrl: 'https://itunes.apple.com/cn/app/id1639285209?mt=8',// ios链接

      isWeichatH5: false,// 当前是否是微信H5浏览器
      isFixImg: false,//显示浏览器打开
    };
  },
  created() {
    const oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "http://res.wx.qq.com/open/js/jweixin-1.6.0.js";
    oScript.onload = this.get_wx;
    document.body.appendChild(oScript);
  },
  mounted() {
    this.isEqui() // 判断是ios还是安卓

    // 判断是否是微信H5打开
    let ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      this.isWeichatH5 = true
    }else{
      this.isWeichatH5 = false
    }

    // 邀请的手机号
    let phone = this.$route.query.phone;
    // 转换成138****0000形式
    this.phone = phone?.slice(0, 3) + "****" + phone?.slice(-4);
    this.getApplicationList(5)// 获取ios下载链接
    this.getApplicationList(6)// 获取安卓下载链接
  },
  methods: {
    // 判断是ios还是安卓
    isEqui(){
      let agent = navigator.userAgent.toLowerCase();
      let android = agent.indexOf("android");
      let iphone = agent.indexOf("iphone")
      let ipad =  agent.indexOf("ipad")
      if (android != -1) {
        this.equiName = "android";
      } else if (iphone != -1 || ipad != -1) {
        this.equiName = "ios";
      }
    },

    // 获取下载应用的信息 1Windows 2mac 3iPad webview 4安卓webview 5i0S 6安卓
    // 获取ios和安卓的安装包
    async getApplicationList(type){
      let result = await getApplicationListApi({type})
      if(result.code==200){
        if(result.data){
          // if(type == 5) this.iosUrl = result.data.url //ios
          if(type == 6) this.androidUrl = result.data.url
        }
      }
    },

    // 显示右上角打开浏览器
    openImg(){
      this.isFixImg = true
    },

    // js判断手机是否安装app，未安装则安装，已安装则打开app
    openApp(){
      var ua = window.navigator.userAgent.toLowerCase();
      //微信
      // if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      //   window.location.href = '' // 这个地方直接用应用宝下载链接
      // }
      //非微信浏览器
      if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
        // window.location = 'dslangya://';
        var ifr = document.createElement("iframe");
        ifr.src = "wssuniapp://"; /***打开app的协议，ios同事提供***/
        ifr.style.display = "none";
        document.body.appendChild(ifr);
        window.setTimeout(function(){
            document.body.removeChild(ifr);
            // window.location.href = this.iosUrl; /*** ios下载app的地址***/
        },5000);
      }else if (navigator.userAgent.match(/android/i)) {
        var state = null;
        try {
            window.location = 'wssuniapp://'; //安卓兄弟可以给你
            // setTimeout(function(){
            //   window.location = this.androidUrl; //android下载地址
            // },5000);
        } catch(e) {}
      }
    },

    // 发送验证码
    async obtainVerifyCode() {
      // 防抖
      debounce(async () => {
        var self = this;
        if (self.verifyContent.disabled) {
          return;
        }
        if (self.validePhone()) {
          // 发送短信接口请求
          let { code, msg } = await getInvitedGetCodeApi(this.getCodeObj);

          if (code != 200) return;
          this.$message({
            type: "success",
            message: "已发送",
          });
          self.countDown();
        }
      }, 500)();
    },

    // 验证手机号
    validePhone() {
      if (["", null, undefined].includes(this.getCodeObj.phone)) {
        this.$message({
          type: "warning",
          message: "请输入手机号",
        });
        return false;
      } else if (!/^1[3456789]\d{9}$/.test(this.getCodeObj.phone)) {
        this.$message({
          type: "warning",
          message: "请输入正确的手机号码",
        });
        return false;
      } else {
        return true;
      }
    },

    // 倒计时方法
    countDown() {
      var time = 60;
      var timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.verifyContent.disabled = false;
          this.verifyContent.text = "获取验证码";
        } else {
          this.verifyContent.disabled = true;
          this.verifyContent.text = `重新获取(${time}s)`;
          time--;
          // this.verifyContent.time--;
        }
      }, 1000);
    },
  },
};
</script>
<style>
body{
  zoom: 1!important;
}
</style>
<style scoped lang="scss">
main.container {
  position: relative;
  background: url("./assets/images/dt_img.png") center no-repeat;
  background-size: cover;
  min-height: 100vh;
  div.tip {
    padding: 0.5333rem 0.8rem 0rem;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-bottom: 2.3733rem;
    display: none;
    
    div{
      min-width: 16px;
    }
    div.return {
    }

    div.title {
    }

    div.more {
    }
  }

  div.login-box {
    text-align: center;
    margin: 0 auto;
    padding-top: 2.3733rem;
    div.login {
      img {
        width: 3.2rem;
        height: 3.2rem;
        margin-bottom: 1.7333rem;
      }
    }

    div.login-tip {
      margin-top: 1.8933rem;
      font-size: 0.8rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    div.login-titile {
      margin-top: 1.3067rem;
      font-size: 1.2267rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
    }
  }

  div.input-box {
    margin-top: 9.1467rem;
    text-align: center;
    div.input-item {
      margin-top: 1.0667rem;
      input {
        padding-left: 0.5333rem;
        width: 17.3333rem;
        font-size: 0.8rem;
        font-family: PingFang SC;
        font-weight: 400;

        display: inline-block;
        height: 2.4rem;
        background: #ffffff;
        border: 0.0267rem solid #cccccc;
        border-radius: 1.2rem;
      }
      input.name {
      }
    }

    div.input-item.haveVerify {
      border: 0.0267rem solid #cccccc;
      height: 2.4rem;
      background: #ffffff;
      border: 0.0267rem solid #cccccc;
      border-radius: 1.2rem;
      display: flex;
      width: 17.3333rem;
      margin: 1.0667rem auto;
      align-items: center;
      input {
        flex: 1;
        height: 2.32rem;

        border: unset;
      }

      span.verify {
        flex: 0.5;
        height: 0.8rem;
        text-align: center;
        line-height: 0.8rem;
        font-size: 0.8rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #f77a23;
        border-left: #cccccc solid 0.0267rem;
      }
    }
  }
  .registerBtn {
    a{
      display: block;
      margin: 1.0667rem auto;
      line-height: 2.2rem;
      width: 17.3333rem;
      height: 2.2rem;
      font-size: 0.8533rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: #ffffff;
      background: #f77a23;
      border-radius: 1.2rem;
      width: 10.3333rem;
      height: 2.4rem;
      background: #f77a23;
      border-radius: 1.2rem;
    }
  }
  div.agreement {
    left: 64%;
    width: 100%;
    display: flex;
    transform: translate(-50%);
    position: absolute;
    bottom: 0.5333rem;
    span.serve {
    }

    span.privacy {
    }
  }
  .BottomTip {
    text-align: center;
    font-size: 0.6933rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
    span{
      cursor: pointer;
    }
  }
}

// 显示浏览器
.fixImg{
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>